import React, { Component } from 'react';
import { ActivityIndicator, Animated, Text, View, StyleSheet } from 'react-native';
import Icon from 'react-native-vector-icons/AntDesign'

export type ToastType = 'success' | 'error' | 'info' | 'warning' | 'loading';

export interface MessageProps {
  content: string;
  duration?: number;
  onClose?: () => void;
  type?: ToastType;
}

class MessageContainer extends Component<MessageProps, any> {
  static defaultProps = {
    duration: 3,
    onClose() { },
  };

  anim: Animated.CompositeAnimation | null | undefined;

  constructor(props: MessageProps) {
    super(props);
    this.state = {
      fadeAnim: new Animated.Value(0),
    };
  }

  componentDidMount() {
    const { onClose } = this.props;
    const duration = this.props.duration as number;
    const timing = Animated.timing;
    if (this.anim) {
      this.anim = null;
    }
    const animArr = [
      timing(this.state.fadeAnim, {
        toValue: 1,
        duration: 200,
        useNativeDriver: true,
      }),
      Animated.delay(duration * 1000),
    ];
    if (duration > 0) {
      animArr.push(
        timing(this.state.fadeAnim, {
          toValue: 0,
          duration: 200,
          useNativeDriver: true,
        }),
      );
    }
    this.anim = Animated.sequence(animArr);
    this.anim.start(() => {
      if (duration > 0) {
        this.anim = null;
        if (onClose) {
          onClose();
        }
      }
    });
  }

  componentWillUnmount() {
    if (this.anim) {
      this.anim.stop();
      this.anim = null;
    }
  }

  render() {
    const { type, content } = this.props;
    let borderColor = '#1890ff';
    let iconDom: React.ReactElement<any>;
    if (type === 'success') {
      borderColor = '#52c41a';
      iconDom = <Icon
        name='checkcircle'
        color={borderColor}
        size={18}
      />;
    } else if (type === 'error') {
      borderColor = '#f5222d';
      iconDom = <Icon
        name='closecircle'
        color={borderColor}
        size={18}
      />;
    } else if (type === 'info') {
      borderColor = '#1890ff';
      iconDom = <Icon
        name='infocirlce'
        color={borderColor}
        size={18}
      />;
    } else if (type === 'warning') {
      borderColor = '#faad14';
      iconDom = <Icon
        name='infocirlce'
        color={borderColor}
        size={18}
      />;
    } else {
      borderColor = '#1890ff';
      iconDom = <ActivityIndicator
        animating
        color={borderColor}
        size='small'
      />;
    }

    return (
      <Animated.View style={[styles.container, { opacity: this.state.fadeAnim, borderColor }]}>
        <View style={styles.innerContainer}>
          {iconDom}
          <Text style={[styles.text, {}]}>{content}</Text>
        </View>
      </Animated.View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    paddingVertical: 6,
    paddingHorizontal: 12,
    maxWidth: '80%',
    marginBottom: 12,
    overflow: 'hidden',
    backgroundColor: '#fff',
    borderRadius: 24,
    borderWidth: 1,
    shadowColor: 'red',
    shadowOffset: { width: 120, height: 200 },
    shadowOpacity: 1,
  },
  innerContainer: {
    alignItems: "center",
    justifyContent: 'center',
    flexDirection: 'row',
  },
  text: {
    color: 'rgba(0, 0, 0, 0.65)',
    fontSize: 16,
    marginLeft: 6,
    fontVariant: ['tabular-nums'],
    lineHeight: 24,
  },
});

export default MessageContainer;